<script>
export default {
    props:{
        cartItems:Array,
    },
    emits:[
        'increase', //加1
        'decrease',   //减1
        'deleteItem',   //删除
    ],
    computed:{
        selectAll:{
            get(){
                return this.cartItems.every(function(item){
                    return item.isSelected == true;
                })
            },
            set(newValue){
                if(newValue){
                    this.cartItems.forEach(function(item){
                        item.isSelected = true;
                    })
                }else{
                    this.cartItems.forEach(function(item){
                        item.isSelected = false;
                    })
                }
            }
        }
    }
}
</script>

<template>
    <div class="cartMain">
        <table id="cartTable">
            <thead>
                <tr>
                    <th>
                        <label for="fl select-all">
                            <input type="checkbox" class="check-all check" v-model="selectAll"/>
                            <span><a href="#" class="selallSPAN">&nbsp;全选</a></span>
                        </label>
                    </th>
                    <th>商 品</th>
                    <th>单 价</th>
                    <th>数 量</th>
                    <th>小 计</th>
                    <th>操 作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in cartItems" :key="item.id">
                    <td class="checkbox">
                        <input type="checkbox" class="check-one check" v-model="item.isSelected"/>
                    </td>
                    <td class="goods">
                        <span><a href="##" class="goodsTitle">{{ item.productName }}</a></span>
                        <span></span>
                        <span><a href="##" class="sellerTitle">{{ item.shopName }}</a></span>
                    </td>
                    <td class="price">{{ item.price }}</td>
                    <td class="count">
                        <span class="reduce" @click="$emit('decrease', item.id)">-</span>
                        <input type="text" class="count-input" :value="item.num" />
                        <span class="add" @click="$emit('increase', item.id)">+</span>
                    </td>
                    <td class="subtotal">{{ (parseFloat(item.price)*item.num).toFixed(2) }}</td>
                    <td class="opration">
                        <span class="deleteOne" @click="$emit('deleteItem', item.id)">删 除</span>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</template>